<script setup>
import { computed, ref } from 'vue'
import axios from '../api/axios'
import {useRouter} from 'vue-router'
import { useCalStore } from '@/stores/cal';

const goodsList = ref([])
const router = useRouter()
const calStore = useCalStore()

// 获取购物车数据
if(sessionStorage.getItem('user')){
  let userid=JSON.parse(sessionStorage.getItem('user')).userid;
  axios.post('/api/carts/cartList',{userid:userid})
  .then(res => {
    if(res.data.code==200){
      goodsList.value = res.data.carts
      goodsList.value.forEach((item) => {
        item.isChecked = false
      })
    }else{
      alert(res.data.msg);
    }    
  })
}else{
  alert('请先登录');
  router.push('/login')
}

// 计算选中商品列表
const ckFruits = computed(() => {
  return goodsList.value.filter((item) => item.isChecked);
})

// 计算总价
const total = computed(() => {
  return ckFruits.value.reduce((sum, item) => sum + item.price * item.num, 0);
})

// 全选功能
const ckAll = computed({
  get() {
    return goodsList.value.every((item) => item.isChecked)
  },
  set(val) {
    goodsList.value.forEach((item) => item.isChecked = val)
  }
})

// 修改数量
const changeNum = (id, num) => {
  if(num < 1) return;
  axios.post('/api/carts/changeNum',{cartid:id, num:num})
}

// 结算
const cal = () => {
  if(ckFruits.value.length === 0) {
    alert('请选择要结算的商品');
    return;
  }
  calStore.calGoodsList = ckFruits.value
  router.push('/cal')
}
</script>

<template>
  <div class="mi-cart-container">
    <!-- 顶部标题 -->
    <div class="mi-cart-header">
      <h2>购物车</h2>
      <p>共 <span>{{ goodsList.length }}</span> 件商品</p>
    </div>

    <!-- 商品列表 -->
    <div class="mi-cart-list" v-if="goodsList.length > 0">
      <!-- 表头 -->
      <div class="mi-cart-header-row">
        <div class="mi-cart-checkbox">
          <input type="checkbox" v-model="ckAll" id="selectAll">
          <label for="selectAll">全选</label>
        </div>
        <div class="mi-cart-product">商品</div>
        <div class="mi-cart-price">单价</div>
        <div class="mi-cart-quantity">数量</div>
        <div class="mi-cart-subtotal">小计</div>
        <div class="mi-cart-action">操作</div>
      </div>

      <!-- 商品项 -->
      <div class="mi-cart-item" v-for="item in goodsList" :key="item.cartid">
        <div class="mi-cart-checkbox">
          <input type="checkbox" v-model="item.isChecked">
        </div>
        <div class="mi-cart-product">
          <img :src="`../public/images/${item.img}`" alt="">
          <div class="mi-product-info">
            <h3>{{ item.gname }}</h3>
            <p class="mi-product-desc">小米自营</p>
          </div>
        </div>
        <div class="mi-cart-price">¥{{ item.price }}</div>
        <div class="mi-cart-quantity">
          <div class="mi-quantity-control">
            <button @click="changeNum(item.cartid, --item.num)" :disabled="item.num <= 1">-</button>
            <span>{{ item.num }}</span>
            <button @click="changeNum(item.cartid, ++item.num)">+</button>
          </div>
        </div>
        <div class="mi-cart-subtotal">¥{{ (item.price * item.num).toFixed(2) }}</div>
        <div class="mi-cart-action">
          <button class="mi-delete-btn">删除</button>
        </div>
      </div>
    </div>

    <!-- 空购物车 -->
    <div class="mi-cart-empty" v-else>
      <div class="mi-empty-content">
        <i class="mi-icon-cart"></i>
        <p>购物车还是空的</p>
        <router-link to="/" class="mi-btn mi-btn-primary">去逛逛</router-link>
      </div>
    </div>

    <!-- 结算栏 -->
    <div class="mi-cart-footer" v-if="goodsList.length > 0">
      <div class="mi-cart-checkbox">
        <input type="checkbox" v-model="ckAll" id="selectAllFooter">
        <label for="selectAllFooter">全选</label>
      </div>
      <div class="mi-cart-total">
        总计: <span class="mi-total-price">¥{{ total.toFixed(2) }}</span>
      </div>
      <button class="mi-checkout-btn" @click="cal">
        结算({{ ckFruits.length }})
      </button>
    </div>
  </div>
</template>

<style scoped>
/* 基础样式 */
.mi-cart-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif;
  color: #333;
}

/* 顶部标题 */
.mi-cart-header {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #e0e0e0;
}

.mi-cart-header h2 {
  font-size: 24px;
  font-weight: normal;
  margin-right: 15px;
}

.mi-cart-header p {
  font-size: 14px;
  color: #757575;
}

.mi-cart-header p span {
  color: #ff6700;
}

/* 购物车列表 */
.mi-cart-list {
  margin-top: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

/* 表头行 */
.mi-cart-header-row {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: #f5f5f5;
  font-size: 14px;
  color: #757575;
}

.mi-cart-header-row > div {
  text-align: center;
}

/* 商品项 */
.mi-cart-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.3s;
}

.mi-cart-item:hover {
  background-color: #fafafa;
}

/* 复选框 */
.mi-cart-checkbox {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mi-cart-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}

/* 商品信息 */
.mi-cart-product {
  flex: 2;
  display: flex;
  align-items: center;
  text-align: left;
}

.mi-cart-product img {
  width: 80px;
  height: 80px;
  margin-right: 20px;
}

.mi-product-info h3 {
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 5px;
}

.mi-product-desc {
  font-size: 12px;
  color: #b0b0b0;
}

/* 价格 */
.mi-cart-price {
  width: 120px;
  color: #ff6700;
}

/* 数量控制 */
.mi-cart-quantity {
  width: 150px;
}

.mi-quantity-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.mi-quantity-control button {
  width: 30px;
  height: 30px;
  background: #f5f5f5;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 16px;
  color: #757575;
}

.mi-quantity-control button:disabled {
  color: #e0e0e0;
  cursor: not-allowed;
}

.mi-quantity-control span {
  display: inline-block;
  width: 40px;
  text-align: center;
  font-size: 14px;
}

/* 小计 */
.mi-cart-subtotal {
  width: 120px;
  color: #ff6700;
  font-weight: bold;
}

/* 操作 */
.mi-cart-action {
  width: 100px;
}

.mi-delete-btn {
  background: none;
  border: none;
  color: #757575;
  cursor: pointer;
  font-size: 14px;
}

.mi-delete-btn:hover {
  color: #ff6700;
}

/* 空购物车 */
.mi-cart-empty {
  padding: 100px 0;
  text-align: center;
  border: 1px solid #e0e0e0;
  margin-top: 20px;
}

.mi-empty-content i {
  font-size: 60px;
  color: #b0b0b0;
}

.mi-empty-content p {
  margin: 20px 0;
  font-size: 16px;
  color: #757575;
}

/* 结算栏 */
.mi-cart-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 100;
}

.mi-cart-total {
  flex: 1;
  text-align: right;
  padding-right: 30px;
  font-size: 16px;
}

.mi-total-price {
  color: #ff6700;
  font-size: 24px;
  font-weight: bold;
}

.mi-checkout-btn {
  width: 200px;
  height: 50px;
  background: #ff6700;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.3s;
}

.mi-checkout-btn:hover {
  background: #f25807;
}

.mi-checkout-btn:disabled {
  background: #e0e0e0;
  cursor: not-allowed;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .mi-cart-header-row {
    display: none;
  }
  
  .mi-cart-item {
    flex-wrap: wrap;
    position: relative;
    padding: 15px;
  }
  
  .mi-cart-checkbox {
    position: absolute;
    left: 15px;
    top: 15px;
    width: auto;
  }
  
  .mi-cart-product {
    width: 100%;
    padding-left: 30px;
    margin-bottom: 10px;
  }
  
  .mi-cart-price,
  .mi-cart-quantity,
  .mi-cart-subtotal,
  .mi-cart-action {
    width: auto;
    margin-right: 15px;
  }
  
  .mi-cart-action {
    position: absolute;
    right: 15px;
    top: 15px;
  }
  
  .mi-cart-footer {
    height: auto;
    padding: 10px;
  }
  
  .mi-checkout-btn {
    width: 120px;
    height: 40px;
    font-size: 16px;
  }
}
</style>